<!--
 * @Author: ljb
 * @Description: 
 * @Date: 2021-09-20 22:17:07
 * @LastEditTime: 2021-09-23 23:06:43
 * @FilePath: \blog-vue\src\components\user\user-panel.vue
-->
<template>
    <div class="blog-user-panel">
        <el-avatar :size="100" :src="circleUrl"></el-avatar>
        <div class="blog-info">
            <h3 class="blog-info--nickname">111111111</h3>
            <div class="blog-info--state">
                <div class="blog-info--item">
                    <span class="blog-state--count">4</span>
                    <span class="blog-state--name">文章</span>
                </div>
                <div class="blog-info--item">
                    <span class="blog-state--count">1</span>
                    <span class="blog-state--name">分类</span>
                </div>
            </div>
            <div class="blog-info--autograph">这个人很懒, 什么都没有写 ^_^</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'UserPanel',
    setup() {
        
    },
}
</script>

<style lang="scss" scoped>
    .blog-user-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        text-align: center;
        border-radius: 4px;
        background: #fff;
        .blog-info {
            padding-top: 24px;
            &--nickname {
                font-size: 24px;
                padding: 0 0 8px;
            }
            &--state {
                display: flex;
                justify-content: center;
                padding: 8px 16px;
                .blog-info--item {
                    padding: 0 12px;
                    span {
                        display: block;
                    }
                    .blog-state--count {
                        color: #555;
                        font-weight: 700;
                    }
                    .blog-state--name {
                        color: #999;
                        padding-top: 4px;
                    }
                }
            }
            &--autograph {
                padding-top: 8px;
                text-indent: 2em;
                color: #555;
                font-size: 16px;
                text-align: left;
            }
        }
    }
</style>
